<template>
  <div class="app-container app-box" style="height: 100%">
    <el-row style="height: 100%">
      <el-col style="padding: 0 10px" :span="3">
        <div class="clone-container">
          <h3>组件列表</h3>
          <draggable
            class="dragArea list-group left-component"
            :list="list1"
            :group="{ name: 'people', pull: 'clone', put: false }"
            :clone="cloneDog"
            @change="log"
          >
            <div class="list-group-item left-component-item" v-for="element in list1" :key="element.id">
              <img class="left-item-icon" :src="element.icon" alt="">
              {{ element.name }}
            </div>
          </draggable>
        </div>
      </el-col>

      <el-col :span="13" class="preview-col">
        <div class="preview-box">
          <h3 style="text-align: center;position: relative">预览
            <el-button style="right: 5px;position: absolute" size="mini" icon="el-icon-upload" @click="save"
                       type="primary">保存布局
            </el-button>
          </h3>

          <draggable
            class="dragArea list-group preview-draggable"
            :list="list2"
            group="people"
            @change="log"
          >
            <div
              class="list-group-item preview-component-item"
              :class="currentComponentCode === element.code ? 'preview-component-item-active' : ''"
              v-for="(element,index) in list2"
              :key="element.id"
              @click="currentComponentCode = element.code;currentComponent = element">
              <div class="delete-btn" v-if="currentComponentCode === element.code" @click="deleteComponent(index)">
                <i class="el-icon-delete"></i>
              </div>
              <mall-header :metadata="element.metadata" v-if="element.code === 'mall_title'"></mall-header>
              <mall-search v-if="element.code === 'mall_search_input'"></mall-search>
              <mall-banner :metadata="element.metadata" v-if="element.code === 'mall_banner'"></mall-banner>
              <mall-menu v-if="element.code === 'mall_menu'"></mall-menu>
              <mall-seckill v-if="element.code === 'mall_seckill'"></mall-seckill>
              <mall-hot-product v-if="element.code === 'mall_hot_product'"></mall-hot-product>
            </div>
          </draggable>
        </div>
      </el-col>
      <el-col :span="8" class="conf-box">
        <mall-header-conf v-if="currentComponentCode === 'mall_title'" :metadata="currentComponent.metadata" @ok="handleConfigOk"></mall-header-conf>
        <mall-banner-conf v-if="currentComponentCode === 'mall_banner'" :metadata="currentComponent.metadata" @ok="handleConfigOk"></mall-banner-conf>
        <mall-menu-conf v-if="currentComponentCode === 'mall_menu'" :metadata="currentComponent.metadata" @ok="handleConfigOk"></mall-menu-conf>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import draggable from "vuedraggable";
import item from "@/layout/components/Sidebar/Item.vue";
import MallHeader from "@/views/webapp/theme/modal/mallHeader.vue";
import MallSearch from "@/views/webapp/theme/modal/mallSearch.vue";
import MallBanner from "@/views/webapp/theme/modal/mallBanner.vue";
import MallMenu from "@/views/webapp/theme/modal/mallMenu.vue";
import MallSeckill from "@/views/webapp/theme/modal/mallSeckill.vue";
import MallHotProduct from "@/views/webapp/theme/modal/mallHotProduct.vue";
import {listLayout, saveLayout} from "@/api/webapp/layout";
import MallHeaderConf from "@/views/webapp/theme/meta/mallHeaderConf.vue";
import MallBannerConf from "@/views/webapp/theme/meta/mallBannerConf.vue";
import MallMenuConf from "@/views/webapp/theme/meta/mallMenuConf.vue";

export default {
  name: "custom-clone",
  computed: {
    item() {
      return item
    }
  },
  display: "Custom Clone",
  order: 3,
  components: {
    MallMenuConf,
    MallBannerConf,
    MallHeaderConf,
    MallHotProduct,
    MallSeckill,
    MallMenu,
    MallBanner,
    MallSearch,
    MallHeader,
    draggable
  },
  data() {
    return {
      list1: [
        {
          id: 1,
          name: "网站标题",
          code: 'mall_title',
          icon: require("@/assets/images/theme/title.png")
        },
        {
          id: 2,
          name: "搜索框",
          code: 'mall_search_input',
          icon: require("@/assets/images/theme/search.png")
        },
        {
          id: 3,
          name: "轮播区域",
          code: 'mall_banner',
          icon: require("@/assets/images/theme/banner.png")
        },
        {
          id: 4,
          name: "菜单配置",
          code: 'mall_menu',
          icon: require("@/assets/images/theme/menu.png")
        },
        {
          id: 5,
          name: "秒杀区域",
          code: 'mall_seckill',
          icon: require("@/assets/images/theme/seckill.png")
        },
        {
          id: 6,
          name: "推荐商品",
          code: 'mall_hot_product',
          icon: require("@/assets/images/theme/recommend.png")
        },
      ],
      currentComponentCode: '',
      currentComponent: {},
      list2: []
    };
  },
  created() {
    this.loadData()
  },
  methods: {
    deleteComponent(index) {
      this.list2.splice(index,1)
    },
    loadData() {
      listLayout().then((res => {
        if (res.success) {
          this.list2 = res.data
        }
      }))
    },
    save() {
      this.list2.forEach((item, index) => {
        item.sort = index
        item.componentId = item.id
      })
      saveLayout(this.list2).then(res => {
        if (res.success) {
          this.$message.success('当前画布已保存!')
        }
      })
    },
    log: function (evt) {
      console.log(this.list2)
    },
    handleConfigOk(e) {
      this.list2.forEach(item => {
        if (this.currentComponentCode === 'mall_title') {
          if (item.code === this.currentComponentCode) {
            item.metadata = {title: e}
          }
        }
        if (this.currentComponentCode === 'mall_banner') {
          if (item.code === this.currentComponentCode) {
            item.metadata = {bannerList: e}
          }
        }
        if (this.currentComponentCode === 'mall_menu') {
          if (item.code === this.currentComponentCode) {
            item.metadata = {menuList: e}
          }
        }
      })
      this.$message.success('当前组件配置已临时保存!')
    },
    cloneDog(e) {
      return e
    }
  }
};
</script>
<style>

.app-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.left-component {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%

}

.left-component-item {
  border: none;
  text-align: center;
  width: 40%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.left-item-icon {
  width: 30px;
  height: 30px;
}

.left-component-item:hover {
  background-color: #FF4F0D;
  color: white;
}

.preview-box {
  width: 100%;
  text-align: center;
}

.preview-draggable {
  width: 320px;
  min-height: 1000px;
  margin: 0 auto;
  background: linear-gradient(#F43226, white 320px);
}

.preview-component-item {
  border: 0;
  padding: 0;
  position: relative;
  width: 322px;
}

.preview-component-item:hover {
  border: 1px #00afff dashed;
  cursor: move;
}

.preview-col {
  background-color: #F1F3F4;
  height: 100%;
  overflow: scroll;
}

.preview-component-item-active {
  position: relative;
  border: 1px #00afff solid;
}

.preview-component-item-active:hover {
  position: relative;
  border: 1px #00afff solid;
}

.delete-btn {
  width: 30px;
  height: 30px;
  right: -20px;
  top: calc(50% - 15px);
  z-index: 999;
  position:absolute;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.conf-box {
  height: 100%;
  overflow: scroll;
}
</style>
